import React, { Component } from 'react'

//HashRouter hash模式
//BrowserRouter 传统url模式
//MemoryRouter 内存中路由

import { MemoryRouter as Router, Link, Route } from 'react-router-dom'

const Home = () => {
  return <h1>Home</h1>
}
const User = () => {
  return <h1>User</h1>
}
const About = () => {
  return <h1>About</h1>
}

export default class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <Link to='/'>首页</Link>
          <Link to='/user'>用户</Link>
          <Link to='/about'>关于</Link>
          {/* 一下为路由规则 */}
          <Route exact path='/' component={Home}></Route>
          <Route exact path='/user' component={User}></Route>
          <Route exact path='/about' component={About}></Route>
        </Router>
      </div>
    )
  }
}